<div style="width:100%;height:55px;background:#FFFFFF;display:flex;">
    <div style="width:200px;height:40px;line-height:55px;">
        <span style="font-size:24px;margin-left:10px;line-height:55px;border-left: 5px solid #0976BD;padding-left:10px;">{{ $title }}</span><span style="font-size:14px;margin-left:5px;">实时数据</span>
    </div>
    <div style="line-height:55px;">
    <small style="margin-left:50px;">
        <span class="dropdown" style="display:inline-block">
            <a id="" class="dropdown-toggle btn btn-white  waves-effect" data-toggle="dropdown" href="javascript:void(0)">
                <stub>自动更新频率：</stub><span class="caret"> {{ $autoRefresh }} 秒</span>
            </a>
            <ul class="dropdown-menu" style="left: 0px; right: inherit;">
                <li class="dropdown-item">
                    <a href="javascript:void(0)" onclick="setAutoRefresh(1)">1 秒</a>
                </li>
                <li class="dropdown-item">
                    <a href="javascript:void(0)" onclick="setAutoRefresh(3)">3 秒</a>
                </li>
                <li class="dropdown-item">
                    <a href="javascript:void(0)" onclick="setAutoRefresh(5)">5 秒</a>
                </li>
                <li class="dropdown-item">
                    <a href="javascript:void(0)" onclick="setAutoRefresh(10)">10 秒</a>
                </li>
                <li class="dropdown-item">
                    <a href="javascript:void(0)" onclick="setAutoRefresh(30)">30 秒</a>
                </li>
                <li class="dropdown-item">
                    <a href="javascript:void(0)" onclick="setAutoRefresh(60)">60 秒</a>
                </li>
            </ul>
        </span>
    </small>
    </div>
    <div style="line-height:55px;">
    <small style="margin-left:50px;">
        <span class="dropdown" style="display:inline-block">
            <a id="" class="dropdown-toggle btn btn-white  waves-effect" data-toggle="dropdown" href="javascript:void(0)">
                <stub>选择盒子：</stub><span class="caret"> {{ $title }}</span>
            </a>
            <ul class="dropdown-menu" style="left: 0px; right: inherit;">
                @foreach($boxes as $box)
                <li class="dropdown-item">
                    <a href="{{ $box['url'] }}">{{ $box['name'] }}</a>
                </li>
                @endforeach
            </ul>
        </span>
    </small>
    </div>
    <div style="line-height:60px; margin-left:20px;">
    <big>
        @if($status)
            <span style="color: green">在线</span>
        @else
            <span style="color: red">离线</span>
        @endif
    </big>
    </div>
</div>

<script type="text/javascript">
    var loop = true;
    function setAutoRefresh(seconds){
        console.log(seconds);
        loop = false;
        let url = "{{ URL::asset('admin/setAutoRefresh') }}";
        let data = {
            _token: '{{ csrf_token() }}',
            value: seconds,
            key: '{{ $key }}'
        }
        $.ajax({
            type : "POST",
            url : url,
            data : data,
            success : function(result) {
                console.log(result)
                if (result.code == 1) {
                    location.reload();
                } else {
                    console.log(result.msg)
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                layer.close(e);
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }
</script>